<div id="results-count" class="results-count" th:if="${page != null}" th:text="${'共 ' + page.totalElements + ' 条关于 “' + (q == null ? '' : q) + '” 的结果'}"></div>

<div class="article-grid" id="article-list">
    <th:block th:if="${page != null and page.totalElements > 0}">
        <div class="article-card" th:each="it : ${page.content}">
            <div class="article-content">
                <span class="article-category" th:text="${it.category != null ? it.category : '知识'}">分类</span>
                <h3 class="article-title" th:text="${it.title}">标题</h3>
                <p class="article-excerpt" th:text="${#strings.abbreviate(it.content, 160)}">摘要</p>
                <div class="article-meta">
                    <span th:text="${#temporals.format(it.updatedAt, 'yyyy-MM-dd HH:mm')}">时间</span>
                    <span class="dot"></span>
                    <span th:text="${it.category != null ? it.category : '未分类'}">分类</span>
                    <a class="read-more" th:href="@{'/article/' + ${it.id}}">阅读全文 →</a>
                </div>
            </div>
        </div>
    </th:block>

    <th:block th:if="${page == null or page.totalElements == 0}">
        <div style="grid-column:1/-1;text-align:center;color:#6b7280;margin:1rem 0 1.25rem 0">暂无内容</div>
    </th:block>
</div>

<div class="pagination" th:if="${page != null and page.totalElements > 0 and page.totalPages > 1}">
    <a class="page-link" th:if="${!page.first}" th:href="@{'/search'(q=${q},page=${page.number-1},size=${page.size})}">上一页</a>
    <span th:each="i : ${#numbers.sequence(0, page.totalPages-1)}">
        <a class="page-link" th:classappend="${i} == ${page.number} ? ' active'" th:text="${i+1}"
           th:href="@{'/search'(q=${q},page=${i},size=${page.size})}"></a>
    </span>
    <a class="page-link" th:if="${!page.last}" th:href="@{'/search'(q=${q},page=${page.number+1},size=${page.size})}">下一页</a>
</div>
